@import "reset" ;
@import "mixin" ;
.reset();
.toubu{
    height: .95rem;
    // dingbucaidan
    position: relative;
    .caidan{
       height: .6rem;
       background:rgb(36,36,36);
       position: relative;
       span{
           a{
               background: url('../image/logo.png')no-repeat;
               float: left;
               width: 1.57rem;
               height: 100%;
               margin-left: .9rem;
               line-height: .6rem;
           }
       }
    ul{
        display: flex;
        width: 5.3rem;
        margin-left:2.6rem;       
        li{
            flex: 1;
            line-height: .6rem;
            // align-items: center;
            text-align: center; 
            // position: relative;
            &:first-child{
                background: black;
            }         
            &:hover{
                background: black;
            }
            a{
                color:rgb(177, 177, 177);
                font-size: .13rem;
               
            }
            &:nth-child(3){
                flex: 0 0 .7rem;
            }
            &:nth-child(4){
                flex: 0 0 .7rem;
            }
            &:nth-child(5){
                flex: 0 0 .8rem;
            }
            &:last-child{
                flex: 0 0 1.1rem;
            }
        }      
    }
    .hot{
        position: absolute;
        top:.05rem;
        right: 5rem;
        a{
            font-size: .19rem;
            color: rgb(194,12,12);
        }
    }
   .sousuo{
       width: 3.4rem;
       height: .4rem;
       position: absolute;
       top: .1rem;
       right: 1rem;
       display: flex;
       input{

           flex: 0  0  1.6rem;
           height: .36rem;
           border-radius: .18rem;
           .placeholder{
               padding: 0 .2rem;
           }       
       }
       .tg{
           flex: 0 0 .9rem;
           margin: .05rem .15rem;
           height: .3rem;
           border: .01rem solid rgb(177, 177, 177);
           border-radius: 1.8rem;
           a{
               color: white;
               line-height: .3rem;
               padding: 0 .02rem;
           }
       }
       .dl{
           flex: 1;
           a{
               position: relative;
               color:rgb(177, 177, 177);
               font-size: .13rem;
               line-height: .4rem;
             }
          }
        }
        .rightsan{
            position: absolute;
            top: .15rem;
            right: .9rem;
            a{
                font-size: .27rem;
                color: rgb(69,69,69);
            }
        }
    }
    // xiaocaidan
    .biao{
        height: .35rem;
        background:rgb(194,12,12);
        position: relative;
        .leftsan{
            position: absolute;
            top: -.18rem;
            left:3rem; 
            a{
                font-size: .25rem;
                color: rgb(194,12,12);
            }
        }
        
        ul{
            width: 5.6rem;
            margin-left: 2.75rem;
            display: flex;
            li{
                flex: 1;
                // float: left;
                // // width: 100%;
                padding: 0 .1rem;
                a{
                    // float: left;
                    margin:.1rem 0;
                    display: block;
                    // height: .14rem;
                    // width: .7rem;
                    :hover{
                        
                            line-height: .16rem;
                            border-radius: .12rem;
                            background: rgb(155,9,9);
                            // text-align: center;
                        
                    }
                    &.tj{
                        display: block;
                       
                       
                        h3{ 
                            width: .5rem;
                            line-height: .16rem;
                            border-radius: .12rem;
                            background: rgb(155,9,9);
                            text-align: center;
                        }
                    }
                  
                   h3{
                       width: .6rem;
                       height: .16rem;
                       font-size: .12rem;
                       color: white;
                       line-height: .16rem;  
                       text-align: center;                
                   }
                }
            }
        }
    }
}

// 歌曲
.gequ{
    width: 11.27rem;
    // height: 5rem;
    // margin-left:1.8rem;
    
    // background: red;
    display: flex;
    .bleft{
        flex: 0 0 1.8rem;
        background: rgb(245,245,245);
    }
    .left{
        flex: 0 0 7.31rem;
        // background: blue;
        padding: .1rem 0 .4rem 0;
        // height: 15.05rem;
        
        border: .01rem solid rgb(211,211,211);
        border-bottom: none;
        .rmtj{
            padding:0 .2rem; 
            .title{
                height: .54rem;
                line-height: .54rem;
                border-bottom: .02rem solid rgb(194,12,12);
                position: relative;
                a{
                    font-size: .13rem;
                    padding: 0 .08rem;
                    &:first-child{
                        color: rgb(194,12,12);
                        font-size: .18rem;
                    }
                    &:nth-child(7){
                        float: right;
                        margin-right:.2rem; 
                    }
                    &:last-child{
                        position: absolute;
                        right: 0;
                        top: 0;
                        color: rgb(194,12,12);
                        font-size: .13rem;
                    }
                }
                span{
                    font-size: .2rem;
                    color: rgb(51,51,51);
                }
            }
            ul{
               margin:.2rem 0; 
                li{
                    position: relative;
                    float: left;
                    margin-right: .42rem; 
                    width: 1.4rem;
                    padding-bottom: .4rem;
                    &:nth-child(8){
                        // margin-left:0; 
                        margin-right:0; 
                    }
                    &:nth-child(4){
                        // margin-left:0;
                        margin-right:0; 
                    }

                    img{
                        width: 1.4rem;
                        height: 1.4rem;
                    }
                    .bottom{
                        position: absolute;
                        bottom: .78rem;
                        left: 0;
                        width: 1.4rem;
                        height: .27rem;
                        background: rgba(15,14,12, .6);
                        border-top: .01rem solid rgb(69,58,44);
                        a{
                            font-size: .12rem;
                            color: rgb(204,204,204);
                            padding-left: .08rem;
                            line-height: .27rem;
                            &:last-child{
                                font-size: .18rem;
                                padding-left:.4rem; 
                            }
                        }
                    }
                    a{
                        font-size: .14rem;
                        color: black;
                        padding-right:.02rem;
                    }
                }
            }
        }
        .gg{ 
            margin:.2rem; 
            position: relative;
            img{
                width: 6.9rem;
                height: .75rem;
            }
            a{
                position: absolute;
                bottom: 0;
                right: 0;
                color: white;
                font-size: .12rem;
                border-radius: .12rem 0 0 0;
                background: #ccc;
            }
        }
        // 新碟上架
        .xdsj{
            padding:0 .2rem; 
            

            .newtitle{
                height: .54rem;
                line-height: .54rem;
                border-bottom: .02rem solid rgb(194,12,12);
                position: relative;
                a{
                    font-size: .13rem;
                    padding: 0 .08rem;
                    &:first-child{
                        color: rgb(194,12,12);
                        font-size: .18rem;
                    }
                    &:nth-child(3){
                        float: right;
                        margin-right:.2rem; 
                    }
                    &:last-child{
                        position: absolute;
                        right: 0;
                        top: 0;
                        color: rgb(194,12,12);
                        font-size: .13rem;
                    }
                }
                span{
                    font-size: .2rem;
                    color: rgb(51,51,51);
                }
            }
        }
// 榜单
        .bd{           
                    
            .newtitle{
                height: .54rem;
                line-height: .54rem;
                border-bottom: .02rem solid rgb(194,12,12);
                position: relative;
                a{
                    font-size: .13rem;
                    padding: 0 .08rem;
                    &:first-child{
                        color: rgb(194,12,12);
                        font-size: .18rem;
                    }
                    &:nth-child(3){
                        float: right;
                        margin-right:.2rem; 
                    }
                    &:last-child{
                        position: absolute;
                        right: 0;
                        top: 0;
                        color: rgb(194,12,12);
                        font-size: .13rem;
                    }
                }
                span{
                    font-size: .2rem;
                    color: rgb(51,51,51);
                }
            }
            .bangdan{
                margin-top: .2rem;
                width: 6.9rem;
                display: flex;
                height: 4.74rem;
                background-color: rgb(244,244,244);
                border: .01rem solid rgb(211,211,211);
                .yuanchuang{
                    flex:1;
                   .bdtitle{
                       padding: .2rem;
                       position: relative;
                       img{
                           width: .8rem;
                           height: .8rem;
                           border: .01rem solid #ccc;
                       }
                       h2{
                           font-size:.13rem;
                           display: block;
                           float: right;
                           font-weight: bold;
                           margin-top:.1rem; 
                           margin-right: .25rem;
                           color:rgb(51,51,51);
                       }
                       .bq{
                           position: absolute;
                           top: .53rem;
                           left: 1.1rem;
                           width: 1.3rem;
                           height: .5rem;
                           a{
                               margin-right: .15rem;
                               font-size: .2rem;
                               color: rgb(193,193,193);
                           }
                       }
                   }
                   ul{
                       height: 3.56rem;
                       width: 100%;
                       margin-top:0; 
                       li{
                           height: .32rem;
                           &:nth-child(2n-1){
                               background: rgb(232,232,232);
                           }
                           &:last-child{
                            a{
                                margin-left: 1.35rem;
                            }
                        }
                        &:nth-child(1),&:nth-child(2),&:nth-child(3){
                            a{
                                &:first-child{
                                    color: rgb(201,60,59);
                                }
                            }
                        }
                        &:nth-child(10){
                            a{
                                &:last-child{
                                    margin-left: .03rem;
                                }
                            }
                        }

                           a{
                               margin-left: .26rem;
                               line-height: .32rem;
                               
                               &:first-child{
                                   font-size: .16rem;
                                  
                               }
                               &:last-child{
                                   margin-left:.13rem; 
                                   font-size: .1rem;
                                   color: rgb(0,0,0);
                               }
                           }
                       }
                   }
                    
                }

                .xinge{
                    flex: 0 0 2.3rem;
                    border-right: .01rem solid rgb(211,211,211);
                   .bdtitle{
                       padding: .2rem;
                       position: relative;
                       img{
                           width: .8rem;
                           height: .8rem;
                           border: .01rem solid #ccc;
                       }
                       h2{
                           font-size:.13rem;
                           display: block;
                           float: right;
                           font-weight: bold;
                           margin-top:.1rem; 
                           margin-right: .25rem;
                           color:rgb(51,51,51);
                       }
                       .bq{
                           position: absolute;
                           top: .53rem;
                           left: 1.1rem;
                           width: 1.3rem;
                           height: .5rem;
                           a{
                               margin-right: .15rem;
                               font-size: .2rem;
                               color: rgb(193,193,193);
                           }
                       }
                   }
                   ul{
                       height: 3.56rem;
                       width: 100%;
                       margin-top:0; 
                       li{
                           height: .32rem;
                           &:nth-child(2n-1){
                               background: rgb(232,232,232);
                           }
                           &:last-child{
                               a{
                                   margin-left: 1.35rem;
                               }
                           }
                           &:nth-child(1),&:nth-child(2),&:nth-child(3){
                            a{
                                &:first-child{
                                    color: rgb(201,60,59);
                                }
                            }
                        }
                        &:nth-child(10){
                            a{
                                &:last-child{
                                    margin-left: .03rem;
                                }
                            }
                        }

                           a{
                               margin-left: .26rem;
                               line-height: .32rem;
                               
                               &:first-child{
                                   font-size: .16rem;
                                  
                               }
                               &:last-child{
                                   margin-left:.13rem; 
                                   font-size: .1rem;
                                   color: rgb(0,0,0);
                               }
                           }
                       }
                   }
                    
                }

                .biaosheng{
                    flex: 0 0 2.3rem;
                    border-right: .01rem solid rgb(211,211,211);
                   .bdtitle{
                       padding: .2rem;
                       position: relative;
                       img{
                           width: .8rem;
                           height: .8rem;
                           border: .01rem solid #ccc;
                       }
                       h2{
                           font-size:.13rem;
                           display: block;
                           float: right;
                           font-weight: bold;
                           margin-top:.1rem; 
                           margin-right: .25rem;
                           color:rgb(51,51,51);
                       }
                       .bq{
                           position: absolute;
                           top: .53rem;
                           left: 1.1rem;
                           width: 1.3rem;
                           height: .5rem;
                           a{
                               margin-right: .15rem;
                               font-size: .2rem;
                               color: rgb(193,193,193);
                           }
                       }
                   }
                   ul{
                       height: 3.56rem;
                       width: 100%;
                       margin-top:0; 
                       li{
                           height: .32rem;
                           &:nth-child(2n-1){
                               background: rgb(232,232,232);
                           }
                           &:last-child{
                            a{
                                margin-left: 1.35rem;
                            }
                        }
                           &:nth-child(1),&:nth-child(2),&:nth-child(3){
                               a{
                                   &:first-child{
                                       color: rgb(201,60,59);
                                   }
                               }
                           }
                           &:nth-child(10){
                            a{
                                &:last-child{
                                    margin-left: .03rem;
                                }
                            }
                        }
                           a{
                               margin-left: .26rem;
                               line-height: .32rem;
                               
                               &:first-child{
                                   font-size: .16rem;
                                  
                               }
                               &:last-child{
                                   margin-left:.13rem; 
                                   font-size: .1rem;
                                   color: rgb(0,0,0);
                               }
                           }
                       }
                   }
                    
                }
            }
        }
        
    }



    .right{
        flex: 0 0 2.5rem;
        border-right: .01rem solid rgb(211,211,211);
        .yhdl{
            width: 2.5rem;
            height: 1.25rem;
            padding: .2rem;
            background: rgb(242,242,242);
            
            border-bottom: .01rem solid rgb(211,211,211);
            p{
                color: rgb(136,136,136);
                font-size: .1rem;
            }
           .yh{
               width: 1rem;
               height: .3rem;
               background: rgb(203,13,20);
               border-radius:.04rem; 
               border: .01rem solid rgb(183,11,17);
               margin: .2rem .5rem 0 .5rem;
            a{
                display: block;
                color: white;
                font-size: .14rem;
                line-height: .3rem;
                text-align: center;
            }
           }
        }
        .ruzhu{
            width: 2.5rem;
            height: 4.6rem;
            // float: left;
            overflow: hidden;
            
            .rz{
                height: .28rem;
                margin:.2rem .2rem .08rem .2rem;
                border-bottom: .01rem solid rgb(204,204,204);

                a{
                    font-size: .1rem;
                    color: rgb(102,102,102);
                    &:first-child{
                        float: left;
                        font-weight: bold;
                        color: rgb(51,51,51);
                    }
                    &:last-child{
                        float: right;
                    }
                }
            }
            ul{
                width: 100%;
                margin-top:.2rem; 
                li{
                    position: relative;
                    margin: .1rem .2rem;
                    height: .61rem;
                    background: rgb(250,250,250);
                    border: .01rem solid rgb(211,211,211);
                    img{
                        height: .59rem;
                        width: .59rem;
                    }
                    .xm{
                        position: absolute;
                        top: 10px;
                        left: .75rem;
                        margin-bottom:.2rem; 
                        a{
                            font-size: .13rem;
                            color: rgb(102,102,102);
                           
                            &:first-child{
                                color: rgb(51,51,51);
                                font-weight: bold;
                            }
                        }
                    }
                }
           } 
           .sq{
               width: 2.1rem;
               height: .3rem;
               border: .01rem solid rgb(204,204,204);
               background: rgb(250,250,250);
               margin: 0 .2rem;
               a{
                color: rgb(51,51,51);
                font-size: .12rem;
                font-weight: bold;
                line-height: .3rem;
                text-align: center;
                margin-left:.45rem; 
               }
           }
        }
        .zhubo{
            width: 2.5rem;
            height: 4.9rem;
            // float: left;
            overflow: hidden;
            
            .zb{
                height: .28rem;
                margin:.2rem .2rem .08rem .2rem;
                border-bottom: .01rem solid rgb(204,204,204);

                a{
                    font-size: .1rem;
                    float: left;
                    font-weight: bold;
                    color: rgb(51,51,51); 
                }
            }
            ul{
                width: 100%;
                margin-top:.2rem; 
                li{
                    position: relative;
                    margin: .1rem .2rem;
                    height: .4rem;
                    img{
                        height: .4rem;
                        width: .4rem;
                    }
                    .zl{
                        position: absolute;
                        top: 0;
                        left: .5rem;
                        margin-bottom:.05rem; 
                        a{
                            font-size: .1rem;
                            color: rgb(102,102,102);
                           
                            &:first-child{
                                color: rgb(0,0,0);
                            }
                            &:nth-child(2){
                                color: rgb(223,13,15);
                                font-size: .17rem;
                            }
                        }
                    }
                }
           } 
        }
    }
    .kb{
        flex:1;
        
        background: #f5f5f5;
      

    }
}
.dibu{
    border-top: .01rem solid rgb(177, 177, 177);
    height: 1.3rem;
    background: rgb(245,245,245);
    // background: red;
    .wy{
        margin-left:1.8rem; 
        margin-top: .15rem;
        // padding: .2rem; 
        height: .9rem;
        width: 5rem;
        a{
            font-size: .1rem;
            color: rgb(153,153,153);
            padding: 0 .03rem; 
            &:first-child{
                padding-left: 0;
            }
            &:nth-child(11),
            &:nth-child(14){
                padding-left: 0;
                
            }  
            &:nth-child(10),&:nth-child(11),
            &:nth-child(12),&:nth-child(13),
            &:nth-child(14),&:nth-child(15){
                color: rgb(102,102,102);
                padding-top: .2rem;
            }
        }
        p{
            font-size: .1rem;
            color: rgb(102,102,102);
        }
    }
   
}